<template>
  <div class="travel-apply-page">
    <div class="content-area">
       <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="formData.destination"
            label="目的地"
            placeholder="请输入出差目的地"
            :rules="[{ required: true, message: '请填写目的地' }]"
          />
          <van-field
            readonly
            clickable
            name="dateRange"
            :model-value="dateRangeText"
            label="出差日期"
            placeholder="点击选择日期范围"
            @click="showCalendar = true"
            :rules="[{ required: true, message: '请选择出差日期' }]"
          />
          <van-field
            v-model="formData.reason"
            label="出差事由"
            type="textarea"
            placeholder="请输入出差事由"
            rows="3"
            autosize
            :rules="[{ required: true, message: '请填写出差事由' }]"
          />
           <van-field
            v-model="formData.budget"
            label="预算金额"
            type="number"
            placeholder="请输入预算金额 (可选)"
          />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            提交申请
          </van-button>
        </div>
      </van-form>
      <van-calendar v-model:show="showCalendar" type="range" @confirm="onConfirmDate" />
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
import { NavBar, Form, Field, CellGroup, Button, Calendar, Empty, Toast } from 'vant'
import 'vant/es/toast/style';

export default {
  name: 'FinanceTravelApply',
  components: {
    vanNavBar: NavBar,
    vanForm: Form,
    vanField: Field,
    vanCellGroup: CellGroup,
    vanButton: Button,
    vanCalendar: Calendar,
    vanEmpty: Empty
  },
  setup() {
    const router = useRouter()
    const formData = reactive({
      destination: '',
      startDate: '',
      endDate: '',
      reason: '',
      budget: ''
    })
    const showCalendar = ref(false)

    const dateRangeText = computed(() => {
      if (formData.startDate && formData.endDate) {
        return `${formatDate(formData.startDate)} - ${formatDate(formData.endDate)}`
      }
      return ''
    })

    const formatDate = (date) => {
       if (!date) return ''
       const d = new Date(date)
       const month = String(d.getMonth() + 1).padStart(2, '0')
       const day = String(d.getDate()).padStart(2, '0')
       return `${d.getFullYear()}-${month}-${day}`
    }

    const onConfirmDate = (values) => {
      const [start, end] = values;
      formData.startDate = start;
      formData.endDate = end;
      showCalendar.value = false;
    }

    const onSubmit = (values) => {
      console.log('submit', formData)
      Toast.success('出差申请提交成功（模拟）');
      // Add actual submit logic here
      // e.g., store.dispatch('finance/submitTravelApply', formData)
      setTimeout(() => goBack(), 1500) // Go back after success
    }

    const goBack = () => router.back()

    return {
      formData,
      showCalendar,
      dateRangeText,
      onConfirmDate,
      onSubmit,
      goBack
    }
  }
}
</script>

<style scoped>
.travel-apply-page {
  min-height: 100vh;
  background-color: #f7f8fa;
}
.content-area {
  padding-top: 16px;
}
</style> 